import { PageContainer } from '@ant-design/pro-layout';
import { Button} from 'antd';
import { FormattedMessage } from 'umi';
import ProTable from '@ant-design/pro-table';

import { DrawerForm,ProFormText } from '@ant-design/pro-form';
import React, { useState} from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import {UserRoleType} from '../../../model';


export default () => {

  const [showCreate, setShowCreate] = useState(false);

  //表头信息以及表值设置
  const columns: ProColumns<UserRoleType>[] = [
    {
      title:'角色名',
      dataIndex: 'label',
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: '此项为必填项' }]
        };
      },
    },
    {
      title: '角色值',
      dataIndex: 'value',
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: '此项为必填项' }]
        };
      },
    },
    {
      title: "操作",
      valueType: 'option',
      render: (text, record,_, action) => [
        <a
          key="editable"
          onClick={() => {
            action.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];
  
  return (
    <PageContainer>
    <ProTable<UserRoleType>
      headerTitle='角色列表'
      // request={(params, sorter, filter) => queryProduct({...params,filter})}
      pagination={false}
      columns={columns}
      rowKey="id"
      search={{
        labelWidth: 120,
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowCreate(true);
          }}
        >
          <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
        </Button>,
      ]}
      toolbar={{settings:[]}}
      editable={{
        type: 'multiple',
        onSave: async (values:any,record) => {
          // var val =await updateProduct(record);
          // if(val.success){
          //   message.success('更新成功');
          //   return true;
          // }else{
          //   message.success('更新失败');
          //   return false;
          // }
        },
        onDelete:async (value:any)=>{
          // var val =await deleteProduct({"ids":value});
          // if(val.success){
          //   message.success('删除成功');
          //   return true;
          // }else{
          //   message.success('删除失败');
          //   return false;
          // }
        }
      }}
      />

         <DrawerForm
           title="角色创建"
           onVisibleChange={setShowCreate}
           visible={showCreate}
           onFinish={async (values: any) => {
              // var val =await insertProduct(values);
              // if(val.success){
              //   message.success('提交成功');
              //   return true;
              // }else{
              //   message.success('提交失败');
              //   return false;
              // }
           }}
         >
           <ProFormText  name="label" label="角色名"  placeholder="请输入角色名"
                rules={[
                  {
                    required: true,
                  },
                ]}/>
           <ProFormText  name="value" label="角色值" placeholder="请输入角色值"
                rules={[
                  {
                    required: true,
                  },
                ]} />
         </DrawerForm>
  </PageContainer>
  );
};